超級簡單寫 CSS（Super Easy CSS） 是一系列 CSS 與網頁前端相關知識的教學文章，主要寫於 2023 - 2025 年的 iThome 鐵人賽。
本系列文章目標是：
學習 CSS 基本知識
並且研究 CSS 中酷炫又令人期待新屬性
讓想要學習 CSS 的人也能一起學到新知識，不用再零零散散地去爬文搜尋。此外，還有提及一些前端基本知識、版本控制、開發經驗、CSS 預處理器 SASS/SCSS 與了解各大 CSS 框架，甚至進一步到 SEO 基本觀念，讓新手對於網頁前端開發有初步且全面的認識。
與其他教學文章不同之處是：這系列文章大部分著重於圖解說明、實務經驗與 DEMO 實作，因為我知道資訊領域許多概念非常抽象，如果能用比喻或圖解，可以讓這些知識更容易理解；而實務經驗與 DEMO 實作才能讓技術落地，讓學習的人清楚自己學習與使用語法的方向。
有幾篇因為寫作的當時生病了，所以內容不夠完整，這個之後會慢慢補齊。
另外，剩下幾篇就要完結了，正在持續更新中。
如果這系列文章對你很有幫助，歡迎你 🧋贊助我杯珍奶 ，對我將會是很大的鼓勵！
還有過去曾經有贊助過我的人，我也統一在這裡，再次跟你們說聲謝謝！🥹
本系列同步發表於我的 Hashnode 部落格：
Eva Chen | 網頁設計師下班後 (hashnode.dev)
#02 關於各家瀏覽器，前端必備的小知識：支援度、市佔率、CSS 實驗語法 -webkit-, -moz-... PostCSS Autoprefixer
#05 HTML 基礎語法
#07 CSS 基本語法 & 權重介紹
#08 CSS 選擇器總整理！id、class、:nth-child(n)、:not、:where、:is、:has 都難不倒我
#72 CSS 偽元素的進階用法：用 ::before 與 ::after 做 RWD 表格 & 客製化樣式的序號清單 (ol, oder list)
#28 CSS 文字過長、行數過多顯示點點點、文字自動折行、強制換行：white-space、word-break、-webkit-line-clamp 的妙用
#29 CSS 立體字、霓虹字、外框字、漸層字：text-shadow、-webkit-text-stroke、-webkit-background-clip
#31 CSS 顏色設定：基本的 hex、rgb()、cmyk()、hsl()、hsb() 、hwb() 與明日之星的 lch()、oklch()
#32 CSS currentcolor、accent-color 與混色的 color-mix() 讓規劃色彩系統好方便！
#33 CSS 切換淺色/深色模式：Media Queries 的 prefers-color-scheme 搭配 CSS 變數
#34 CSS 讓圖片填滿容器的各種方法，以圓形大頭貼為例：object-fit 與 background-size，搭配 aspect-ratio
#35 圖片的 1x, 2x, 3x 是什麼？關於網頁上圖片解析度的處理：HTML srcset、CSS image-set() 與 @media resolution
#36 HTML 用影片當背景，使用 iframe 嵌入 Youtube/ IG/ TikTok/ X (Twitter) 影片
#37 CSS 基本漸層：線性/放射/圓錐漸層 (CSS linear-gradient, radial-gradient, conic-gradient)
#41 用 CSS border-radius 畫圓角與圓圓的形狀：圓、圓柱、橢圓、蛋型、鐘型、葉子 (眼睛)、花瓣 (水滴/心形)、牛角 (彎月)
#44 CSS 邊框 border 與各種花式邊框的小技巧：borde-image、outline、box-shadow
#46 CSS 濾鏡 filter/ backdrop-filter：模糊、透明圖片加陰影、調色、毛玻璃、漸進式模糊效果
#48 CSS 噪點漸層 (Grainy Gradients) 的製作方法 (todo)
#50 CSS 3D Transform
#78 CSS + SVG 仿 Apple iOS26 液態玻璃（Liquid Glass）效果 (Safari 不支援)
#51 CSS Transition 與一些小技巧：倒帶、影響相鄰的兄弟 (todo hover 巢狀冒泡效果)
#52 詳細了解 CSS 各種偽類：hover、focus、active、focus-within、focus-visible、target
#80 Display: none 也可以做 CSS Transition 動畫了？@starting-style 與 transition-behavior: allow-discrete
#53 CSS Animation (todo 逐格動畫 打字動畫 動畫暫停)
#55 純 CSS 照片淡入淡出輪播動畫
#84 SASS/SCSS (3) 使用檔案管理樣式 Partials / Modules (@use / @import / !default)
#88 SASS/SCSS (7) sass:color 顏色模組——color.adjust 與 color.scale 取代舊的 lighten() 和 darken()
#94 原子設計 - 大多數框架所遵循的原則
#95 Tailwind CSS
#96 Bootstrap
#97 其他介紹（shadcn/Ant Design/Materialize CSS/Bulma/Open Props/UnoCSS/Foundation)
#98 SEO 基本概念-1：語意化標籤、反向連結等注意要點
#99 SEO 基本概念-2：Open Graph、結構化資料
#100 AAO：AI 的 SEO
#101 SEO 工具介紹
#102 SEO 寫作心法
#103 省錢自架靜態網站的方法
2023 鐵人賽開始：#00 參賽前言 / 文章目錄（本篇）
2023 鐵人賽結束：#30 iT 鐵人賽心路歷程 & 我的寫作方法
2024 鐵人賽開始：#00 PART 2！參賽前言 / 文章目錄
2025 鐵人賽開始：#00 PART 3！參賽前言 / 文章目錄
#?? 真結局，感言
本系列文章目標是學習 CSS 基本知識，並且研究 The State of CSS 中值得令人期待新屬性，讓想要學習 CSS 的人也能一起學到新知識，不用再零零散散地去爬文搜尋。此外，還會提及一些前端基本知識、版本控制、開發經驗等必要概念，讓新手對於前端開發有全面的認識。
這 30 天我的方向主要是：
自我挑戰：研究新穎的 CSS 屬性
每年都有的 The State of CSS 統計，討論了許多新提出的 CSS 屬性（例如：color-mix()、:has、max()、min()、clamp()、container query 等等），我覺得很有趣，卻未曾實際深究，我想趁此機會加以了解。
作為筆記：供自己日後參考
延續上一點，將這些新學到的東西統整起來。再來是，過去在學習的時候有些容易混淆的部分，我希望也能藉此機會一起釐清。
工作了多年，我想留下個紀念，統整這些我所學到的知識，並且透過分享，在網路上留下一些痕跡。
幫助他人：讓人跨出學習網頁的第一步
除了統整好基礎前端與 CSS 知識外，並且上述所說未來能變得實用，且目前瀏覽器支援度還不差的新屬性（支援的瀏覽器>=3），一併整理在所有基礎知識中。這樣想學的人也能一起學到新知識，不用再零零散散地去爬文搜尋。
本系列文章會以 CSS 為主，HTML、Git 等網頁開發概念為輔。
主要目標族群是完全小白新手。無論你是想要學習網頁成為前端工程師，或是想要了解網頁如何運作的 PM 或設計師，都很適合。
我會介紹基礎的前端知識，因為我發現有時在開發上，PM、設計師或是業主，容易因為不懂前端或網頁上的 Domain Knowledge，造成上工作上的溝通成本或重工，而這往往只是缺乏了幾個簡單的概念。
次要則是已經會了，但是想了解 CSS 新屬性的人。
就讓我們開始前端基礎之旅吧！
iThome鐵人賽
看影片追技術